<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="/typeUtil"  prefix="typeUtil"%>
	<%@taglib uri="/dateUtil"  prefix="dateUtil"%>
	<!-- 换房信息输入框 -->
	<div role="tabpanel" class="tab-pane" id="chan">
		<div id="reserveInforDiv" style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
			<div class="form-horizontal">
				<input id="checkInId" type='hidden' value='${checkIn.id }'>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">当前房间类型:</label>
					<div class="col-xs-5">
						<label  class="col-xs-10 control-label">${typeUtil:getTypeName(room.typeId)}</label>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">房间名称:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label">${room.name}</label>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">单价:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label">${typeUtil:getTypePrice(room.typeId)*room.discount/100.0 }元/日</label>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">当前总费用:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label">${checkIn.cost }</label>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">要选择的房间类型:</label>
						<div class="col-xs-5">
							<select class="col-xs-10 control-label" id="typeId"></select>
						</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">要选择的房间名称:</label>
						<div class="col-xs-5">
							<select class="col-xs-10 control-label" id="room"></select>
						</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">价格:</label>
						<div class="col-xs-5">
							<label class="col-xs-10 control-label" id='price'></label>
						</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">添加时间:</label>
						<div class="col-xs-5">
							<label class="col-xs-10 control-label" id='addDate'></label>
						</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">图片:</label>
						<div class="col-xs-5">
							<img id='pic' height='100' width='100'><br>
						</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">备注:</label>
						<div class="col-xs-5">
							<label class="col-xs-10 control-label" id='zcomment'></label>
						</div>
				</div>
				<input type="hidden" id="roomId">
				<div class="form-group text-right">
					<div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
						<button  class="btn btn-xs btn-green" id='lock'>锁定该房间</button>
						<button  class="btn btn-xs btn-white" onclick="jump('/hotel/checkIn/checkInList')">取消</button>
					</div>
				</div>
				<div id="changeReasonDiv">
					<div class="form-group">
						<label for="" class="col-xs-4 control-label">房间质量问题:</label>
							<div class="col-xs-5">
								<input class="form-control input-sm duiqi" type="checkbox" id="objective"><br>
							</div>
					</div>
					<div class="form-group">
						<label for="" class="col-xs-4 control-label">换房原因：</label>
							<div class="col-xs-5">
								<textarea class="form-control input-sm duiqi" rows="10" cols="20" id="changeReason"></textarea><br>
							</div>
					</div>
					<div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
						<button  class="btn btn-xs btn-green" id='submitChange'>换房</button>
					</div>
				</div>
			</div>>
		</div>
	</div>
<style>
	#changeReasonDiv{
		display:none;
	}
</style>
<script type="text/javascript" src="/hotel/js/jquery.min.js"></script>
<script type="text/javascript" src="/hotel/js/timeUtil.js"></script>
<script type="text/javascript">
	function clearRoomInfor(){
		$('#roomId').val('')
		$('#price').text('')
		$('#pic').attr('src','')
		$('#addDate').text('')
		$('#zcomment').text('')
	}
	//更新房间信息
	function refreshRoomInfor(id){
		if(id!=null){
			$.get("/hotel/changeRoom/roomInfor",{'id':id},function(str){
				//alert(str)
				var res=eval('(' +str + ')')
				if(res.code!=0){
					alert(res.message)
					return;
				}
				room=res.object
				$('#roomId').val(room.id)
				$('#price').text(room.price+'元/日(房型折扣:'+room.typeDiscount+'%,房间折扣:'+room.discount+'%)')
				$('#calcPrice').val(room.price)
				$('#pic').attr('src','/hotel/upload/'+room.pic)
				$('#addDate').text(room.addDate)
				$('#zcomment').text(room.zcomment)
			})
		}
	}
	//更新类型选择列表
	function refreshTypeList(){
		$('#typeId').empty()
		$('#room').empty()
		$.get("/hotel/changeRoom/typeList",{},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			types=res.object
			$('#typeId').append('<option disabled selected>选择房型</option>')
			for(var i=0;i<types.length;i++){
				//alert(types[i].id+' '+types[i].name)
				$('#typeId').append('<option value='+types[i].id+'>'+types[i].name+'</option>')
			}
		})
	}
	
	//更新房间选择列表
	function refreshRoomList(id){
		$('#room').empty()
		$.get("/hotel/changeRoom/freeRoomList",{'id':id,'fromStr':"${dateUtil:datetime2str(checkIn.inTime) }",'toStr':"${dateUtil:datetime2str(checkIn.outTime) }" },function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			rooms=res.object
			for(var i=0;i<rooms.length;i++){
				//alert(types[i].id+' '+types[i].name)
				$('#room').append('<option value='+rooms[i].id+'>'+rooms[i].floor+'F-'+rooms[i].name+'</option>')
			}
			//$('#room').val(rooms[0].id)
			if(rooms.length>0){//如果有符合条件的房间
				refreshRoomInfor(rooms[0].id)	//更新房间信息
			}
		})
	}
	//锁定房间
	function lockRoom(id,code){
		$.post("/hotel/changeRoom/lockRoom.do",{'id':id,'code':code},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				refreshTypeList()
				return;
			}
		})
	}
	$('#room').change(function(){
		refreshRoomInfor($('#room').val())
	})
	$('#typeId').change(function(){
		clearRoomInfor()
		refreshRoomList($('#typeId').val())
	})
	$('#lock').click(function(){
		
		if($('#lock').text()=='锁定该房间'){
			$('#changeReasonDiv').css('display','block')
			$('#lock').text('解锁该房间')
			lockRoom($('#roomId').val(),1)
		}else{
			$('#changeReasonDiv').css('display','none')
			$('#lock').text('锁定该房间')
			lockRoom($('#roomId').val(),0)
		}
	})
	$('#submitChange').click(function(){
		data={'roomId':$('#roomId').val(),'checkId':$('#checkInId').val(),'objective':$('#objective').prop('checked')}
		$.post('/hotel/changeRoom/changeConfirm.do',data,function(str){
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}else{
				if(confirm('需要补差价'+res.object+'元，您确定要换房吗？')){
					data={'roomId':$('#roomId').val(),'checkId':$('#checkInId').val(),'objective':$('#objective').prop('checked'),
							'reason':$('#changeReason').val()
					}
					$.post('/hotel/changeRoom/changeRoom.do',data,function(str){
						var res=eval('(' +str + ')')
						if(res.code!=0){
							alert(res.message)
							return;
						}else{
							window.location.href="/hotel/system/mainPage"
						}
					})
				}
			}
		})
	})
	refreshTypeList()
	</script>